<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业信息管理</title>
    <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="../../static/kj/vue.min.js"></script>
    <script src="../../static/kj/element-ui/index.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
    <div id="app">
        <div class="c-panel f-main">
            <div class="c-title">企业信息管理</div>
            
            <!-- 企业基本信息 -->
            <div class="company-basic-info">
                <el-card header="企业基本信息">
                    <el-form :model="companyInfo" :rules="companyRules" ref="companyForm" label-width="120px">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="企业名称" prop="companyName">
                                    <el-input v-model="companyInfo.companyName" placeholder="请输入企业名称"></el-input>
                                </el-form-item>
                                <el-form-item label="统一社会信用代码" prop="creditCode">
                                    <el-input v-model="companyInfo.creditCode" placeholder="请输入统一社会信用代码"></el-input>
                                </el-form-item>
                                <el-form-item label="法定代表人" prop="legalPerson">
                                    <el-input v-model="companyInfo.legalPerson" placeholder="请输入法定代表人"></el-input>
                                </el-form-item>
                                <el-form-item label="注册资本" prop="registeredCapital">
                                    <el-input v-model="companyInfo.registeredCapital" placeholder="请输入注册资本">
                                        <template slot="append">万元</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="成立日期" prop="establishDate">
                                    <el-date-picker v-model="companyInfo.establishDate" type="date" placeholder="选择成立日期"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="经营范围" prop="businessScope">
                                    <el-input type="textarea" :rows="3" v-model="companyInfo.businessScope" placeholder="请输入经营范围"></el-input>
                                </el-form-item>
                                <el-form-item label="注册地址" prop="address">
                                    <el-input type="textarea" :rows="2" v-model="companyInfo.address" placeholder="请输入注册地址"></el-input>
                                </el-form-item>
                                <el-form-item label="联系电话" prop="phone">
                                    <el-input v-model="companyInfo.phone" placeholder="请输入联系电话"></el-input>
                                </el-form-item>
                                <el-form-item label="企业邮箱" prop="email">
                                    <el-input v-model="companyInfo.email" placeholder="请输入企业邮箱"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item>
                            <el-button type="primary" @click="saveCompanyInfo">保存</el-button>
                            <el-button @click="resetCompanyInfo">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <!-- 资质证照管理 -->
            <div class="qualification-management">
                <el-card header="资质证照管理">
                    <div class="qualification-tools">
                        <el-button type="primary" @click="addQualification">添加证照</el-button>
                        <el-button type="warning" @click="checkExpiry">到期提醒</el-button>
                        <el-button @click="exportQualifications">导出清单</el-button>
                    </div>

                    <el-table :data="qualificationData" border style="width: 100%; margin-top: 20px;">
                        <el-table-column prop="certName" label="证照名称" width="200"></el-table-column>
                        <el-table-column prop="certNumber" label="证照编号" width="180"></el-table-column>
                        <el-table-column prop="issueOrg" label="发证机关" width="150"></el-table-column>
                        <el-table-column prop="issueDate" label="发证日期" width="120"></el-table-column>
                        <el-table-column prop="expiryDate" label="到期日期" width="120">
                            <template slot-scope="scope">
                                <span :style="{color: getExpiryColor(scope.row.expiryDate)}">
                                    {{ scope.row.expiryDate }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="状态" width="100">
                            <template slot-scope="scope">
                                <el-tag :type="getCertStatusType(scope.row.status)">
                                    {{ scope.row.status }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="viewCert(scope.row)">查看</el-button>
                                <el-button size="mini" type="primary" @click="editCert(scope.row)">编辑</el-button>
                                <el-button size="mini" type="warning" @click="renewCert(scope.row)" v-if="scope.row.status === '即将到期'">续期</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </div>

            <!-- 企业统计信息 -->
            <div class="company-statistics">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card header="经营统计">
                            <div class="stat-grid">
                                <div class="stat-item">
                                    <div class="stat-label">年营业额</div>
                                    <div class="stat-value">{{ statistics.annualRevenue }}万元</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-label">员工总数</div>
                                    <div class="stat-value">{{ statistics.employeeCount }}人</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-label">车辆数量</div>
                                    <div class="stat-value">{{ statistics.vehicleCount }}辆</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-label">仓储面积</div>
                                    <div class="stat-value">{{ statistics.warehouseArea }}㎡</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card header="资质状态">
                            <div class="qualification-status">
                                <div class="status-item valid">
                                    <div class="status-number">{{ qualificationStatus.valid }}</div>
                                    <div class="status-label">有效证照</div>
                                </div>
                                <div class="status-item expiring">
                                    <div class="status-number">{{ qualificationStatus.expiring }}</div>
                                    <div class="status-label">即将到期</div>
                                </div>
                                <div class="status-item expired">
                                    <div class="status-number">{{ qualificationStatus.expired }}</div>
                                    <div class="status-label">已过期</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    companyInfo: {
                        companyName: '燕农冷链物流有限公司',
                        creditCode: '91110000MA01234567',
                        legalPerson: '张三',
                        registeredCapital: '5000',
                        establishDate: '2018-06-15',
                        businessScope: '货物运输、仓储服务、冷链物流、食品流通',
                        address: '北京市朝阳区燕农路123号',
                        phone: '010-12345678',
                        email: 'info@yannong-logistics.com'
                    },
                    companyRules: {
                        companyName: [
                            { required: true, message: '请输入企业名称', trigger: 'blur' }
                        ],
                        creditCode: [
                            { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
                            { pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/, message: '请输入正确的统一社会信用代码', trigger: 'blur' }
                        ],
                        legalPerson: [
                            { required: true, message: '请输入法定代表人', trigger: 'blur' }
                        ]
                    },
                    qualificationData: [
                        {
                            certName: '道路运输经营许可证',
                            certNumber: 'JT20180001',
                            issueOrg: '北京市交通委员会',
                            issueDate: '2020-01-15',
                            expiryDate: '2025-01-15',
                            status: '有效'
                        },
                        {
                            certName: '食品经营许可证',
                            certNumber: 'SP20180002',
                            issueOrg: '北京市食品药品监督管理局',
                            issueDate: '2021-03-10',
                            expiryDate: '2024-03-10',
                            status: '即将到期'
                        },
                        {
                            certName: '危险货物运输许可证',
                            certNumber: 'WX20180003',
                            issueOrg: '北京市安全生产监督管理局',
                            issueDate: '2019-05-20',
                            expiryDate: '2023-05-20',
                            status: '已过期'
                        }
                    ],
                    statistics: {
                        annualRevenue: 8560,
                        employeeCount: 156,
                        vehicleCount: 45,
                        warehouseArea: 12500
                    },
                    qualificationStatus: {
                        valid: 8,
                        expiring: 3,
                        expired: 1
                    }
                }
            },
            methods: {
                getExpiryColor(expiryDate) {
                    const today = new Date();
                    const expiry = new Date(expiryDate);
                    const diffTime = expiry - today;
                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                    
                    if (diffDays < 0) return '#F56C6C'; // 已过期
                    if (diffDays <= 30) return '#E6A23C'; // 即将到期
                    return '#67C23A'; // 正常
                },
                getCertStatusType(status) {
                    const typeMap = {
                        '有效': 'success',
                        '即将到期': 'warning',
                        '已过期': 'danger'
                    };
                    return typeMap[status] || 'info';
                },
                saveCompanyInfo() {
                    this.$refs.companyForm.validate((valid) => {
                        if (valid) {
                            this.$message.success('企业信息保存成功');
                        }
                    });
                },
                resetCompanyInfo() {
                    this.$refs.companyForm.resetFields();
                },
                addQualification() {
                    this.$message.info('添加证照功能开发中');
                },
                checkExpiry() {
                    this.$message.info('检查到期证照：食品经营许可证将于2024-03-10到期');
                },
                exportQualifications() {
                    this.$message.success('证照清单导出成功');
                },
                viewCert(row) {
                    this.$message.info('查看证照功能开发中');
                },
                editCert(row) {
                    this.$message.info('编辑证照功能开发中');
                },
                renewCert(row) {
                    this.$confirm('确认续期证照 ' + row.certName + '？', '续期确认').then(() => {
                        this.$message.success('续期申请已提交');
                    });
                }
            }
        });
    </script>

    <style scoped>
        .company-basic-info, .qualification-management, .company-statistics {
            margin-bottom: 30px;
        }
        
        .qualification-tools {
            margin-bottom: 20px;
        }
        
        .qualification-tools .el-button {
            margin-right: 10px;
        }
        
        .stat-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .stat-item {
            text-align: center;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .stat-label {
            color: #666;
            margin-bottom: 10px;
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #409EFF;
        }
        
        .qualification-status {
            display: flex;
            justify-content: space-around;
            padding: 20px 0;
        }
        
        .status-item {
            text-align: center;
        }
        
        .status-item.valid {
            color: #67C23A;
        }
        
        .status-item.expiring {
            color: #E6A23C;
        }
        
        .status-item.expired {
            color: #F56C6C;
        }
        
        .status-number {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .status-label {
            font-size: 14px;
            opacity: 0.8;
        }
    </style>
</body>
</html>